<div data-field="root">
    <div class="col-md-12">
        <section>
            <h3>Popover examples</h3>
            <p>See
                <a href="http://www.patternfly.org/pattern-library/widgets/#popover">http://www.patternfly.org/pattern-library/widgets/#popover</a> for complete popover documentation.
            </p>
            <ul class="list-group">
                <li class="list-group-item">
                    <h4 class="list-group-item-heading">Example using data-* attributes</h4>
                    <a class="list-group-item-text btn btn-link" role="button" data-toggle="popover" data-field="popover" data-trigger="hover" data-content="test..." title="" data-placement="left" data-container="body">
                        <span class="pficon pficon-info"></span>
                    </a>
                </li>
                <li class="list-group-item">
                    <h4 class="list-group-item-heading">Example using dynamic element</h4>
                    <div class="list-group-item-text" data-field="dynamic-popover"></div>
                </li>
                <li class="list-group-item">
                    <h4 class="list-group-item-heading">Example overriding data-* attributes</h4>
                    <a class="list-group-item-text btn btn-link" role="button" data-toggle="popover" data-field="popover-override" data-trigger="hover" data-content="test..." title="" data-placement="top" data-container="body">
                        <span class="pficon pficon-info"></span>
                    </a>
                </li>
                <li class="list-group-item">
                    <h4 class="list-group-item-heading">Example using custom element</h4>
                    <button type="button" class="btn btn-default" data-field="popover-button" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
                        Popover on right
                    </button>
                </li>
            </ul>
        </section>
        <hr>
        <section>
            <h3>Date Range Picker examples</h3>
            <p>See
                <a href="http://www.daterangepicker.com">http://www.daterangepicker.com</a> for complete Date Range Picker documentation.
            </p>
            <ul class="list-group">
                <li class="list-group-item">
                    <h4 class="list-group-item-heading">Example using input</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Date range..." data-field="datetimepicker"/>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</div>